<template>
<div>
  <div class="backroad" id="map"></div>
<div id="tip" class='info'></div>

<div class="input-card" style='width:18rem;'>
    <label style='color:white;font-weight:600;padding-top:0.5rem;margin-left:5rem'>公交站点查询</label>
    <div class="input-item">
            <div class="input-item-prepend"  style="color:white"><span class="input-item-text" >站名:</span></div>
            <input id='stationKeyWord' type="text" style=" height: 1.5rem; border-radius: 10px;outline: none;margin-left:3rem">
    </div>
    <input id="search" type="button" class="btn" value="查询" />
    <router-link to="/on"><button class="btn2">返回</button></router-link>
</div>

</div>
</template>

<script>
  export default {
    name: 'station',
    mounted() {
    var map = new AMap.Map("map", {
        resizeEnable: true,
        center: [121.550357, 29.874556],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    var markers = [];
	stationSearch();
    /*公交站点查询*/
    function stationSearch() {
        // 移除原有marker
        map.remove(markers);
        markers = [];
        var stationKeyWord  = document.getElementById('stationKeyWord').value
        if(!stationKeyWord) return
        //实例化公交站点查询类
        var station = new AMap.StationSearch({
            pageIndex: 1, //页码
            pageSize: 60, //单页显示结果条数
            city: '010'   //确定搜索城市
        });
        station.search(stationKeyWord, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                stationSearch_CallBack(result);
            } else {
                document.getElementById('tip').innerHTML = JSON.stringify(result);
            }
        });
    }
    /*公交站点查询返回数据解析*/
    function stationSearch_CallBack(searchResult) {
        var stationArr = searchResult.stationInfo;
        var searchNum = stationArr.length;
        if (searchNum > 0) {
            document.getElementById('tip').innerHTML = '查询结果：共' + searchNum + '个相关站点';
            for (var i = 0; i < searchNum; i++) {
                var marker = new AMap.Marker({
                    icon:new AMap.Icon({
                       image:'//a.amap.com/jsapi_demos/static/resource/img/pin.png',
                       size:new AMap.Size(32,32),
                       imageSize:new AMap.Size(32,32)
                    }),
                    offset:new AMap.Pixel(-16,-32),
                    position: stationArr[i].location,
                    map: map,
                    title: stationArr[i].name
                });
                marker.info = new AMap.InfoWindow({
                    content: stationArr[i].name,
                    offset: new AMap.Pixel(0, -30)
                });
                marker.on('mouseover', function(e) {
                    e.target.info.open(map, e.target.getPosition())
                })
                markers.push(marker);
            }
            map.setFitView();
        }
    } 
    document.getElementById('search').onclick = stationSearch;
    },
    methods: {
     
    }
  }
</script>

<style scoped>
.info{
  display: flex;
  justify-content: center;
  z-index: 10000;
  position: fixed;
  top: 5%;
  left: 2%;
  background-color: #1e1e1e;
  border-radius: 10px;
  width: 12rem;
  height: 5rem; 
  color: aliceblue !important;
  align-items: center;
}
  .backroad {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
  }
.input-card{
  display: flex;
  justify-content: center;
  z-index: 10000;
  position: fixed;
  top: 80%;
  left: 80%;
  background-color: #1e1e1e;
  border-radius: 10px;
  width: 12rem;
  height: 8rem;
}
.input-item{
  position: absolute;
  top: 2.5rem;
  left: 1rem;
  font-size: 0.9rem;
}
.btn{
  position: relative;
  top: 6rem;
  height: 1.5rem;
  width: 3rem;
 right: 7rem;
}
.btn2{
  position: relative;
  top: 6rem;
  height: 1.5rem;
  width: 3rem;
 right: 5rem;
}
</style>